<template>
  <div class="app-container documentation-container">
    <div class="top">
      <ul>
        <el-form :rules="rules" ref="ruleForm" :label-position="labelPosition" label-width="100px"
                 :model="formLabelAlign">
          <li class="left_">
            <div class="grid-content bg-purple">
              <el-form-item label="产品模板" >
                <el-select v-model="formLabelAlign.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称" prop="ename">
                <el-input v-model="formLabelAlign.ename" width="100"></el-input>
              </el-form-item>
              <el-form-item label="产品编号" prop="enumber">
                <el-input v-model="formLabelAlign.enumber"></el-input>
              </el-form-item>
              <el-form-item label="产地">
                <el-input v-model="formLabelAlign.origin"></el-input>
              </el-form-item>
              <el-form-item label="位置序号">
                <el-input v-model="formLabelAlign.order"></el-input>
              </el-form-item>
            </div>
          </li>
          <li class="right_">
            <div class="grid-content bg-purple-light">
              <el-form-item label="手机视频监控">
                <el-input v-model="hisval"></el-input>
                <el-button type="primary" size="mini" @click="addMonitor('his')" plain>添加</el-button>
                <el-button type="success" size="mini" @click="SeeMonitor('his')" plain>查看</el-button>
              </el-form-item>
              <el-form-item label="PC视频监控">
                <el-input v-model="rtmpval"></el-input>
                <el-button type="primary" size="mini" @click="addMonitor('rtmp')" plain>添加</el-button>
                <el-button type="success" size="mini" @click="SeeMonitor('rtmp')" plain>查看</el-button>
              </el-form-item>
              <el-form-item label="关联购买链接">
                <el-input v-model="formLabelAlign.paylink"></el-input>
              </el-form-item>
              <el-form-item label="关联传感器">
                <el-input v-model="formLabelAlign.sensor"></el-input>
              </el-form-item>
            </div>
          </li>
        </el-form>
      </ul>
    </div>
    <div class="sub_mit">
      <el-button type="primary" class="sub_button" @click.native="onSubmit">{{textval}}</el-button>
      <el-button type="success" v-if="submit" class="sub_button" @click.native="onImage">添加图片</el-button>
      <el-button type="warning" v-if="submit" class="sub_button" @click.native="onintroduction">添加企业介绍</el-button>
    </div>

    <el-dialog title="添加企业图片" width="70%" :visible.sync="dialogTableVisible">
      <el-form :label-position="labelPosition" label-width="100px">
        <!--HOMEGOODSIMAGE-->
        <el-form-item label="身份证正面">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="Homegoods">
            <img v-if="Homegoodsimg" :src="Homegoodsimg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="产品图片">
          <el-upload
            class="upload-demo"
            action=""
            :before-upload="beforeUpload"
            :before-remove="handleRemove"
            name="image"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加企业介绍" width="70%" :visible.sync="qiye">
      <tinymce :Goodsid="IDother" v-model="content" :height="300"/>

      <el-button size="small" type="primary" @click.native="addqiyejies">添加</el-button>
    </el-dialog>
    <el-dialog title="链接地址" width="70%" :visible.sync="Monitorflag">
      <el-table :data="MonitorData">
        <el-table-column property="link" label="链接地址" width="280"></el-table-column>
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click.native="deleteMonitor(scope.$index, MonitorData)" plain>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  import addimg from 'cs/addimg/addimage'
  import Tinymce from '@/components/Tinymce'
  import {
    mapGetters
  } from 'vuex'

  export default {
    props: {},
    components: {
      addimg,
      Tinymce,
      mapGetters,
    },
    data() {
      return {
        Homegoodsimg:'', //商品首页图片
        //图片
        canCrop: false,
        /*测试上传图片的接口，返回结构为{url:''}*/
        uploadUrl: this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.QIYEJIESAOIMAGE,
        pathName: '',
        content: '',
        //
        textval: '注册',
        MonitorData: [],//临时存放监控数据
        Monitorflag: false,//监控列表弹框
        rtmpval: '', //pc监控
        hisval: '',  //手机监控
        Monitortype: '',//监控是查看手机 1 还是查看PC 2 链接
        qiye: false,
        submit: false,
        content: '',
        dialogTableVisible: false,
        IDother: '', //ID
        imgval: {},
        labelPosition: 'right',
        formLabelAlign: {
          ename: '',//名称
          enumber: '',//编号
          type: '1',   //类型 1养殖 2种植
          rtmp: [],    //pc监控地址
          his: [],     //手机监控地址
          origin: '',  //产地
          order: '',   //序号
          status: '1',  //1启用 2停用
          paylink: '', //购买链接
          sensor: ''  //关联传感器
        },
        rules: {
          ename: [
            { required: true, message: '请输入产品名称', trigger: 'blur' }
          ],
          enumber: [
            { required: true, message: '请输入产品编号', trigger: 'blur' }
          ]
        },
        options: [{
          value: '1',
          label: '养殖'
        }, {
          value: '2',
          label: '种植'
        }],
        fileList: []
      }
    },
    methods: {
      Homegoods(file){  //首页商品图片
        if (this.$oneselfFn.IMAGEVAL(file)) {
          this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.HOMEGOODSIMAGE, file }).update(
            (ref) => {
              if (ref.status == 200) {
                this.Homegoodsimg = ref.data.imageURL + '/' + ref.data.imagePath
              }
            }, (res) => {
              console.log(res)
            })
        }
        return false;
      },
      addqiyejies() {  //添加企业介绍
        let data = {
          'id': this.IDother,
          'upload': {
            'rember': this.content
          }
        }
        this.$apifn.EdithGoods(data).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.$message({
              message: '企业介绍添加成功',
              type: 'success'
            })
          }
        }).catch((res) => {

        })
      },
      beforeUpload(file) {  //添加图片
        if (this.$oneselfFn.IMAGEVAL(file)) {
          this.$imgFn.seend({
            'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.GOODSIMAGE,
            file
          }).addimg(
            (ref) => {
              if (ref.status == 200) {
                this.fileList.push({
                  name: file.name,
                  url: ref.data.imageURL + '/' + ref.data.imagePath
                })
              }
            }, (res) => {
              // console.dir(res.request)
              if(res.request.status == 500){
                this.$notify({
                  title: '警告',
                  message: '请上传标准图片格式',
                  type: 'warning'
                })
              }
            })
        } else {
          this.$notify({
            title: '警告',
            message: '图片大小不能超过2M',
            type: 'warning'
          })
        }
        return false
      },
      handleRemove(file, fileList) {  //证书删除
        if (file && file.status === 'success') {
          console.log(file)
          this.$imgFn.seend({ 'pathimg': fileList[0].url.slice(28) }).deleteimg(
            (ref) => {
              if (ref.status == 200) {
                if (ref.data.code == 200) {
                  this.$notify({
                    title: ref.data.Massage,
                    type: 'success'
                  })
                  this.fileList = fileList;
                }
              }
            }, (res) => {
              console.log(res)
            })
        }
      },
      inputval(val) { //获取图片参数
        this.imgval = val
      },
      onSubmit() { //添加产品
        if(this.qiyeenterprise.id){
          let data = {
            'id': this.IDother,
            'upload': this.formLabelAlign
          }
          this.$apifn.EdithGoods(data).then((ref) => {
            if (ref.data.Response.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          }).catch((res) => {

          })
        }else {
          this.formLabelAlign.rtmp = JSON.stringify(this.formLabelAlign.rtmp);
          this.formLabelAlign.his = JSON.stringify(this.formLabelAlign.his);
          this.$apifn.AddGoods(this.formLabelAlign).then((ref) => {
            if (ref.data.Response.code == 200) {
              this.IDother = ref.data.Response.data.id.toString();
              this.submit = true;
              this.$message({
                message: '添加产品成功,请继续',
                type: 'success'
              })
            }
          }).catch((res) => {

          })
        }


      },
      addMonitor(val) {  //添加监控
        switch (val) {
          case 'his': //手机
            if (this.hisval == '') {
              this.$message({
                message: '警告手机监控链接不能为空哦',
                type: 'warning'
              })
              return false
            }
            this.formLabelAlign.his.push({ 'link': this.hisval })
            this.hisval = ''
            break
          case 'rtmp': //pc
            if (this.rtmpval == '') {
              this.$message({
                message: '警告PC监控链接不能为空哦',
                type: 'warning'
              })
              return false
            }
            this.formLabelAlign.rtmp.push({ 'link': this.rtmpval })
            this.rtmpval = ''
            break
        }
      },
      SeeMonitor(val) { //查看监控
        switch (val) {
          case 'his': //手机
            if (this.formLabelAlign.his.length > 0) {
              this.Monitortype = '1'
              this.MonitorData = this.formLabelAlign.his
              this.Monitorflag = true
            } else {
              this.$message({
                message: '警告哦，您还没有添加手机监控链接哦',
                type: 'warning'
              })
            }
            break
          case 'rtmp': //pc
            if (this.formLabelAlign.rtmp.length > 0) {
              this.Monitortype = '2'
              this.MonitorData = this.formLabelAlign.rtmp
              this.Monitorflag = true
            } else {
              this.$message({
                message: '警告哦，您还没有PC监控链接哦',
                type: 'warning'
              })
            }
            break
        }
      },
      deleteMonitor(index, rows) { //删除链接
        rows.splice(index, 1)
        switch (this.Monitortype) {
          case '1': //手机
            this.formLabelAlign.his = rows
            break
          case '2': //PC
            this.formLabelAlign.rtmp = rows
            break
        }

      },
      onImage() { //添加图片
        this.dialogTableVisible = true
      },
      onintroduction() { //添加企业介绍
        this.qiye = true
      },
      GET_IMG() { //获取所有图片
        this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.GOODSIMAGE }).select(
          (ref) => {
            if (ref.status == 200) {
              let data = this.$oneselfFn.ImageHandlefunction(ref.data)
              if (data != {}) {
                if (data.GoodsImage) {
                  data.GoodsImage.forEach((item, key) => {
                    this.fileList.push({
                      'name': key + 1,
                      'url': item
                    })
                  })
                }
              }
            }
          }, (res) => {
            // console.log(res)
          }
        )
      },
      GET_Home_IMG() {
        this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.HOMEGOODSIMAGE }).select(
          (ref) => {
            if (ref.status == 200) {
                   this.Homegoodsimg = this.$ENV.UPLOADIMG +ref.data[0];
                   console.log(this.$ENV.UPLOADIMG +ref.data[0]);
            }
          }, (res) => {

          }
        )
      }
    },
    watch: {},
    computed: {
      ...mapGetters([
        'qiyeenterprise'
      ])
    },
    created() {
      if (this.qiyeenterprise.id) {
        // console.log(this.qiyeenterprise);
        this.content =  this.qiyeenterprise.rember;
        // this.rember
        this.textval = '修改';
        this.formLabelAlign = this.qiyeenterprise;
        this.IDother = this.qiyeenterprise.id.toString();
        this.submit = true;
        this.GET_Home_IMG();
        this.GET_IMG();
      }
    },
    mounted() {
      // console.log(this.$ENV.IDPOSITIVE);
      //生命周期
    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }

  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      /*height:147px;*/

    }

    .top ul {

    }

    .top ul li {

    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 320px;
    }

    .top ul {
      width: 100%;
      height: 100%;
    }

    .top ul li {
      float: left;
    }

    .left_ {
      width: 41%;
    }

    .right_ {
      width: 41%;
      margin-left: 10%;
    }

    .sub_mit {
      width: 80%;
      height: 50px;
      margin: auto;
    }

    .sub_button {
      /*float: right;*/
    }
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    /*background: #e5e9f2;*/
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }


</style>
